<template>
	<view class="content">
		<view style="font-weight: bold;">AI故事</view>
		<view class="con-mid" v-if="list.length>0">
			<view class="label" v-for="(item,index) in list" @click="goDetail(item.id)">
				<image :src="item.image" style="width: 130px;height: 130px;" mode="aspectFill"></image>
				<view>{{item.title}}</view>
			</view>
		</view>
		<view v-else>
			<view class="con-btm">当前无故事</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					id: 123456,
					title: "《西游记》",
					image: "https://img0.baidu.com/it/u=2114405866,2537247985&fm=253&fmt=auto&app=138&f=JPEG?w=633&h=500",
					content: [{
							id: 355,
							title: "如来巧识真假美猴王",
							fileUrl: "https://webfs.kugou.com/202409191807/7a75569fe3db1a82b509a18c7c0b2d60/v3/ba3b353567a05042ce0973c08cbc665e/yp/full/ap1014_us0_mi0e35e555b6e96116d6596f6aa1f807c3_pi406_mx382802753_s989134482.mp3"
						},
						{
							id: 466,
							title: "比丘国降妖救群童",
							fileUrl: "https://webfs.kugou.com/202409191807/5fdff4f73ede06d6c33b8714d08f755a/v3/2886a81e1c1a42213990e172885db602/yp/full/ap1014_us0_mi0e35e555b6e96116d6596f6aa1f807c3_pi406_mx382813351_s810107233.mp3"
						},
						{
							id: 577,
							title: "九头狮捉走唐三藏",
							fileUrl: "https://webfs.kugou.com/202409191808/ba05cada546d45da3d0f66d8360cfd6a/v3/2a4fe592ddcef54ef4e2aea5261d0031/yp/full/ap1014_us0_mi0e35e555b6e96116d6596f6aa1f807c3_pi406_mx382824673_s3156886345.mp3"
						},
						{
							id: 688,
							title: "稀柿沟猪八戒开路",
							fileUrl: "https://webfs.kugou.com/202409151751/d945eefc0c80bbb3a9f2a79566131bab/v3/4f0b35bc13c1be6267cf72f2af307567/yp/full/ap1014_us0_mii0w1iw8z2ai2iphcu80ooo2ki81120_pi406_mx382815998_s2605025517.mp3"
						},
						{
							id: 799,
							title: "悟空给朱紫国王治病",
							fileUrl: "https://webfs.kugou.com/202409151752/0e3b3d68be4ce672058a631647b101bb/v3/2c1b70cfda075adc1630c3b784863ac5/yp/full/ap1014_us0_mii0w1iw8z2ai2iphcu80ooo2ki81120_pi406_mx382826645_s3357826652.mp3"
						},
						{
							id: 800,
							title: "请天尊收伏九头狮",
							fileUrl: "https://webfs.kugou.com/202409151752/cc5c5f7bc8144cd43b329f78ff9c1942/v3/bb36e36a176a60d1d462a6f71ba242e1/yp/full/ap1014_us0_mii0w1iw8z2ai2iphcu80ooo2ki81120_pi406_mx382877784_s1081246799.mp3"
						},
						{
							id: 8001,
							title: "众天将齐战牛魔王",
							fileUrl: "https://webfs.kugou.com/202409151752/9f28a4e741d1ba90a76ad627e638b78a/v3/73885b8ac02e7af111a9bd030a3f6715/yp/full/ap1014_us0_mii0w1iw8z2ai2iphcu80ooo2ki81120_pi406_mx382862767_s2209657988.mp3"
						},{
							id: 8002,
							title: "狮驼岭唐僧遇三王",
							fileUrl: "https://webfs.kugou.com/202409151752/97d14f57e563d0e23da9c12bd728cfa0/v3/7de3bf067df93c92056055a6af41fd2c/yp/full/ap1014_us0_mii0w1iw8z2ai2iphcu80ooo2ki81120_pi406_mx382878209_s3099454482.mp3"
						},{
							id: 8003,
							title: "小雷音弥勒擒黄眉",
							fileUrl: "https://webfs.kugou.com/202409151753/acd43fd7a3a8385175ee6054ec55a17a/v3/9f9fd32854c733208519f715ff6b16bb/yp/full/ap1014_us0_mii0w1iw8z2ai2iphcu80ooo2ki81120_pi406_mx382889752_s1546884504.mp3"
						},{
							id: 8004,
							title: "孙悟空巧计斗三王",
							fileUrl: "https://webfs.kugou.com/202409151753/31bb1f5fe62bcbe26c34b1029f72a083/v3/c6ae912613ea6c212c195bd55f0f5b2a/yp/full/ap1014_us0_mii0w1iw8z2ai2iphcu80ooo2ki81120_pi406_mx382896739_s3774126965.mp3"
						},
						
					]
				}, {
					id: 7891011,
					title: "格林童话",
					image: "https://img2.baidu.com/it/u=4228115896,1610449344&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500",
					content: [{
							id: 133,
							title: "魔鬼的三根金发",
							fileUrl: "https://webfs.kugou.com/202409151746/3e58217f8d31bc83f4c9aaeca6102031/v3/c4aafabf6f62ba21999c1653b6d49f3c/yp/full/ap1014_us0_mi0e35e555b6e96116d6596f6aa1f807c3_pi406_mx102804110_s1814252857.mp3"
						},
						{
							id: 2447,
							title: "什么都不怕的王子",
							fileUrl: "https://webfs.kugou.com/202409151756/9796e59cf931bcc02f10b62b8988e4b5/v3/876028bc0ae6c5d44d13c95a417d6b0b/yp/full/ap1014_us0_mi0e35e555b6e96116d6596f6aa1f807c3_pi406_mx102804115_s2302139811.mp3"
						},
						{
							id: 2441,
							title: "小鞋匠",
							fileUrl: "https://webfs.kugou.com/202409151757/b86b739a33cca3a1b49afd94373cfe33/v3/9964f5284babad49a7b87099c763bf87/yp/full/ap1014_us0_mi0e35e555b6e96116d6596f6aa1f807c3_pi406_mx102804105_s3753729224.mp3"
						},
						{
							id: 2442,
							title: "大拇指",
							fileUrl: "https://webfs.kugou.com/202409151757/048b85ec3d46aec3f1eb4043e1cbc6fa/v3/1a510d1192763da1c5b982c834c15c0a/yp/full/ap1014_us0_mi0e35e555b6e96116d6596f6aa1f807c3_pi406_mx102804099_s3825881051.mp3"
						},
						{
							id: 2443,
							title: "聪明的小裁缝",
							fileUrl: "https://webfs.kugou.com/202409151758/8e561fb6f25a1e5e546ea6194e7e22a0/v3/377578c8fa5d5cf09bf461d5b1b06c5d/yp/full/ap1014_us0_mi0e35e555b6e96116d6596f6aa1f807c3_pi406_mx102804100_s3309661703.mp3"
						},
						{
							id: 2444,
							title: "三个小矮人",
							fileUrl: "https://webfs.kugou.com/202409151758/7d18e5bc410003a32370a1cb35a84342/v3/8d0b9f7078ab3cb9a40aaa8179d9e3db/yp/full/ap1014_us0_mi0e35e555b6e96116d6596f6aa1f807c3_pi406_mx102804101_s3773203923.mp3"
						}
					]
				}, {
					id: 1314435,
					title: "儿童百科",
					image: "https://imgessl.kugou.com/stdmusic/20211026/20211026202506473394.jpg",
					content: [{
							id: 1221,
							title: "如何过好寒暑假",
							fileUrl: "https://webfs.kugou.com/202409151759/0deeddbb8a43f4950ce268cb7afe1494/v3/ab72b853eb8288109037057e2007ff88/yp/full/ap1014_us0_mii0w1iw8z2ai2iphcu80ooo2ki81120_pi406_mx642687552_s1895359874.mp3"
						},
						{
							id: 1222,
							title: "家里的自来水从何来",
							fileUrl: "https://webfs.kugou.com/202409151759/adcac0c93a28b33edb9ee691562e2933/v3/37afff538559e186173d9db8be2fafd2/yp/full/ap1014_us0_mii0w1iw8z2ai2iphcu80ooo2ki81120_pi406_mx643681751_s1064864190.mp3"
						},
						{
							id: 1223,
							title: "蓝天上的飞机",
							fileUrl: "https://webfs.kugou.com/202409151800/0ee58f5a709547ac0d30368d52353dd8/v3/899b9774a625a0ac8d162938e4fc4ab2/yp/full/ap1014_us0_mii0w1iw8z2ai2iphcu80ooo2ki81120_pi406_mx548834271_s3797870543.mp3"
						}
					]
				}]
			};
		},
		onLoad() {
			//存缓存
			uni.setStorageSync(
				"story",
				this.list
			);
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/story/tabulation?_id=${id}&type=1`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding:30px 18px 0px 18px;
		text-align: center;

		.con-mid {
			display: flex;
			flex-wrap: wrap;
			font-size: 38rpx;
			justify-content: space-between;
			padding: 20px 0;

			.label {
				margin:0 0 20rpx 0;
			}

			image {
				border-radius: 26rpx;
			}
		}

		.con-btm {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			color: #93999c;
		}
	}
</style>